<template>
  <div class="dashboard-container">
    <!-- 数据总览区 -->
    <el-row :gutter="24">
      <el-col
          :xs="24"
          :sm="12"
          :md="8"
          v-for="(card, index) in overviewCards"
          :key="index"
      >
        <el-card class="overview-card" shadow="hover">
          <div class="card-header">
            <span class="title">{{ card.title }}</span>
            <el-icon @click="handleOverviewCard(index)">
              <Switch v-if="index === 1"/>
              <More v-else/>
            </el-icon>
          </div>
          <div class="card-value">{{
              card.title === t('repaymentAmount') ? (card.value / 10000).toFixed(4) + '万' : card.value
            }}
          </div>
          <div
              class="trend-info"
              :class="{ 'up': card.trend > 0, 'down': card.trend < 0 }"
          >
            <el-icon>
              <ArrowUp v-if="card.trend > 0"/>
              <ArrowDown v-else/>
            </el-icon>
            {{ Math.abs(card.trend).toFixed(2) }}%
          </div>
          <div class="chart-container">
            <div ref="charts" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 销售转化区 -->
    <el-row :gutter="24" class="analysis-section">
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('SalesFunnelAnalysis') }}</span>
            </div>
          </template>
          <div ref="funnelChart" class="funnel-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('StatisticsAmountContractsExecution') }}</span>
            </div>
          </template>
          <div ref="pieContractChart" class="pie-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('CustomerSourceDistribution') }}</span>
            </div>
          </template>
          <div ref="pieChart" class="pie-chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="24">
        <!-- 趋势分析区 -->
        <el-card class="trend-card">
          <template #header>
            <div class="trend-header">
              <span>{{ t('TrendAnalysis') }}</span>
              <div class="trend-controls">
                <el-select v-model="queryYearValue" style="width: 120px" @change="updateTrendAnalysisData">
                  <el-option :label="t('ThisYear')" :value="new Date().getFullYear()"></el-option>
                  <el-option :label="t('LastYear')" :value="new Date().getFullYear() - 1"></el-option>
                  <el-option :label="t('YearBeforeLast')" :value="new Date().getFullYear() - 2"></el-option>
                </el-select>
                <el-radio-group v-model="trendMetric" style="margin-left: 16px" @change="handleTrendMetric">
                  <el-radio-button label="contract">{{ t('contractAmount') }}</el-radio-button>
                  <el-radio-button label="payment">{{ t('repaymentAmount') }}</el-radio-button>
                  <!--              <el-radio-button label="customers">新增客户</el-radio-button>-->
                </el-radio-group>
              </div>
            </div>
          </template>
          <el-row v-loading="loadingTrendAnalysis">
            <el-col :span="18">
              <div ref="trendChart" class="trend-chart"></div>
            </el-col>
            <el-col :span="6">
              <div ref="yearChart" class="year-chart"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 趋势分析区 -->
    <el-card>
      <template #header>
        <div class="trend-header">
          <span>{{ t('chinaMap') }}</span>
          <div class="trend-controls">
            <el-radio-group v-model="areaType" style="margin-left: 16px" @change="handleMapType">
              <el-radio-button label="lead">{{ t('lead') }}</el-radio-button>
              <el-radio-button label="customer">{{ t('subjectCustomer') }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>
      <el-row>
        <el-col :span="16">
          <div ref="mapChart" class="map-chart"></div>
        </el-col>
        <el-col :span="8">
          <el-table border :data="mapData">
            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
            <el-table-column label="省份" width="200" prop="name" align="center"></el-table-column>
            <el-table-column label="数量" prop="value" align="center"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';
import {More, ArrowUp, ArrowDown, Open} from '@element-plus/icons-vue';
import {getDashboard, getTrendAnalysis, getAreaData} from "@/api/dashboard"
import {useI18n} from "vue-i18n";
import chinaGeoJson from "@/assets/china-map.json"

const {t} = useI18n()
const loadingTrendAnalysis = ref(false)
const trendMetric = ref('contract');
const areaType = ref('lead');
const queryYearValue = ref(new Date().getFullYear())
const charts = ref([]);
const funnelChart = ref(null);
const pieChart = ref(null);
const trendChart = ref(null);
const yearChart = ref(null);
const pieContractChart = ref(null);
const mapChart = ref(null);
let trendInstance = null

const overviewCards = ref([
  {title: t('totalLead'), value: '2,846', trend: 12.5, data: []},
  {title: t('totalOpp'), value: '1,268', trend: 8.2, data: []},
  {title: t('totalCustomer'), value: '856', trend: -3.1, data: []},
  {title: t('totalContract'), value: '426', trend: 15.4, data: []},
  {title: t('repaymentAmount'), value: '￥3,642,500', trend: 5.7, data: []},
  {title: t('productSales'), value: '1,286', trend: -2.3, data: []},
]);
const contractAmountData = ref({})
const customerData = ref({})
const receivePaymentData = ref({})
const contractAmountTotalData = ref({})
const opportunityData = ref([])
const countData = ref([])
const mapData = ref([])

const handleMapType = (value) => {
  updateMapData(value)
}

const handleTrendMetric = (value) => {
  const customer = customerData.value
  let secondData = {};
  let legend = [t('contractAmount'), t('newCustomer')];

  if (value === 'contract') {
    secondData = contractAmountData.value;
    legend[0] = t('contractAmount');
  } else {
    secondData = receivePaymentData.value
    legend[0] = t('repaymentAmount');
  }

  if (!trendInstance) {
    trendInstance = echarts.init(trendChart.value);
  }
  trendInstance.clear(); // 清空所有内容
  trendInstance.setOption({
    animation: true,
    tooltip: {
      trigger: 'axis',
      formatter: params => {
        const lines = params.map(p => {
          if (p.seriesType === 'bar') {
            // 金额数据，转万元并保留4位小数
            return `${p.seriesName}：￥${(p.value / 10000).toFixed(4)} 万`;
          } else {
            // 数量不处理
            return `${p.seriesName}：${p.value}`;
          }
        });
        return lines.join('<br/>');
      }
    },
    legend: {
      data: legend
    },
    grid: {
      left: "80",
      bottom: "25"
    },
    xAxis: {
      type: 'category',
      data: customer.data.map(d => d.name)
    },
    yAxis: [
      {
        type: 'value',
        name: t('amount'),
        axisLabel: {
          formatter: value => `￥${(value / 10000).toFixed(4)} 万`
        }
      },
      {
        type: 'value',
        name: t('newCustomer'),
        splitLine: {show: false}
      }
    ],
    series: [
      {
        name: legend[0],
        type: 'bar',
        data: secondData.data.map(d => d.value),
        label: {
          show: true,
          position: 'inside',   // 标签显示在柱子顶部
          valueAnimation: true,
          formatter: params => {
            if (params.value === 0) {
              return '';
            }
            return `￥${(params.value / 10000).toFixed(4)} 万`
          }
        }
      },
      {
        name: legend[1],
        type: 'line',
        yAxisIndex: 1,
        data: customer.data.map(d => d.value),
        label: {
          show: true,
          position: 'right',
          offset: [0, -10], // 向上偏移 10px
          formatter: params => {
            if (params.value === 0) {
              return '';
            }
            return `${params.value}个`
          }
        }
      }
    ]
  }, true);

  window.addEventListener('resize', () => {
    trendInstance.resize()
  })
};

const updateData = () => {
  getDashboard(queryYearValue.value).then(res => {
    countData.value = res.data.countData

    contractAmountTotalData.value = res.data.contractAmountTotalData
    overviewCards.value.length = 0
    // 初始化迷你趋势图
    charts.value.forEach((chart, index) => {
      overviewCards.value.push({
        title: countData.value[index].title,
        value: countData.value[index].value,
        trend: countData.value[index].trend,
        data: countData.value[index].data,
        change: false
      })
      updateOverviewCards(index)
    });

    // 初始化漏斗图
    const funnelInstance = echarts.init(funnelChart.value);
    // 计算最大值，确保至少为1，防止除零错误
    const funnelData = res.data.funnelData || []
    const maxValue = Math.max(...funnelData.map(item => item.value || 0), 1)
    funnelInstance.setOption({
      animation: false,
      tooltip: {trigger: 'item', formatter: '{b}: {c}'},
      series: [{
        name: t('SalesFunnel'),
        type: 'funnel',
        left: '5%',
        top: 0,
        bottom: 0,
        width: '80%',
        min: 0,
        max: maxValue,  // 动态设置最大值
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.name + ': ' + params.value;
          }
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        data: funnelData
      }]
    })
    window.addEventListener('resize', () => {
      funnelInstance.resize()
    })

    // 初始化饼图
    const pieInstance = echarts.init(pieChart.value);
    pieInstance.setOption({
      animation: false,
      tooltip: {trigger: 'item'},
      series: [{
        name: t('CustomerSource'),
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: function (params) {
            const percent = ((params.value / params.percent) * 100).toFixed(1); // 计算原始百分比
            return `{name|${params.name}}：{value|${params.value}个}\n{percent|(${percent}%)}`;
          },
          rich: {
            name: {
              fontSize: 12,
              fontWeight: 'bold'
            },
            value: {
              fontSize: 12,
              color: '#666'
            },
            percent: {
              fontSize: 12,
              color: '#999'
            }
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        data: res.data.customerFromData
      }]
    });
    window.addEventListener('resize', () => {
      pieInstance.resize()
    })

    const pieContractInstance = echarts.init(pieContractChart.value);
    const formatWan = value => (value / 10000).toFixed(4)
    const pieContractData = contractAmountTotalData.value
    pieContractInstance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {type: 'shadow'},
        formatter: params => {
          const lines = params.map(p =>
              `${p.seriesName}: ￥${formatWan(p.value)} 万`
          )
          return lines.join('<br/>')
        }
      },
      legend: {
        bottom: '0%',
        data: [t('totalAmount'), t('Refund'), t('Unpaid')]
      },
      grid: {
        top: '5%',
        left: '3%',
        right: '3%',
        bottom: "10%",
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [t('AmountCondition')]
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: value => `￥${(value / 10000).toFixed(0)} 万`
        }
      },
      series: [
        {
          name: t('totalAmount'),
          type: 'bar',
          data: [pieContractData.contractTotalAmount],
          label: {
            show: true,
            position: 'top',
            formatter: value => `￥${formatWan(pieContractData.contractTotalAmount)} 万`
          },
          itemStyle: {color: '#5470c6'}
        },
        {
          name: t('Refund'),
          type: 'bar',
          data: [pieContractData.receivedTotalAmount],
          label: {
            show: true,
            position: 'top',
            formatter: value => `￥${formatWan(pieContractData.receivedTotalAmount)} 万`
          },
          itemStyle: {color: '#91cc75'}
        },
        {
          name: t('Unpaid'),
          type: 'bar',
          data: [pieContractData.unreceivedTotalAmount],
          label: {
            show: true,
            position: 'top',
            formatter: value => `￥${formatWan(pieContractData.unreceivedTotalAmount)} 万`
          },
          itemStyle: {color: '#fac858'}
        }
      ]
    })
    window.addEventListener('resize', () => {
      pieContractInstance.resize()
    })
    // 商机态势
    opportunityData.value = res.data.businessOpportunitySituation
  })
  updateTrendAnalysisData()
  // 注册中国地图（只需执行一次）
  echarts.registerMap('china', chinaGeoJson);
  updateMapData("lead")
};

const updateMapData = (type) => {
  getAreaData(type).then(res => {
    mapData.value.length = 0
    mapData.value = res.data.areaData
    const mapChartInstance = echarts.init(mapChart.value);
    mapChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: params => `${params.name}<br/>数量：${params.value || 0}`
      },
      grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
        containLabel: true
      },
      visualMap: {
        min: 0,
        max: Math.max(...mapData.value.map(d => d.value)) || 100,
        left: '0',
        bottom: '0',
        text: ['高', '低'],
        inRange: {
          color: ['#e0f3ff', '#a0d8ef', '#64b5f6', '#1976d2', '#0d47a1']
        },
        calculable: true,
        textStyle: {color: '#333'}
      },
      geo: {
        map: 'china',
        layoutCenter: ['45%', '70%'], // 地图中心点在容器中心（x, y）
        layoutSize: '80%',           // 地图整体大小（可用百分比或像素）
        roam: true,
        zoom: 1.75,
        label: {
          show: true,
          fontSize: 10,
          color: '#333'
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          areaColor: '#f0f0f0'
        },
        emphasis: {
          label: {show: true, color: '#000', fontWeight: 'bold'},
          itemStyle: {
            areaColor: '#a0c4ff'
          }
        }
      },
      series: [{
        name: '省份数据',
        type: 'map',
        map: 'china',
        geoIndex: 0,
        data: mapData.value
      }]
    }, true);
    window.addEventListener('resize', () => {
      mapChartInstance.resize()
    })
  })
};


const updateTrendAnalysisData = () => {
  loadingTrendAnalysis.value = true
  getTrendAnalysis(queryYearValue.value).then(res => {
    const yearAmountData = res.data.yearAmountData
    contractAmountData.value = res.data.contractAmountData
    customerData.value = res.data.customerData
    receivePaymentData.value = res.data.receivePaymentData

    const yearPieInstance = echarts.init(yearChart.value);
    yearPieInstance.setOption({
      title: {
        text: t('StatisticsContractCollectionThisYear'),
        subtext: `${t('TotalContractAmount')}：¥${(yearAmountData.value / 10000).toFixed(4)} 万`,
        left: 'center',
        top: '0%',
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold'
        },
        subtextStyle: {
          fontSize: 12,
          color: '#666'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: params => {
          const valueWan = (params.value / 10000).toFixed(4);
          return `${params.name}：¥${valueWan} 万 (${params.percent}%)`;
        }
      },
      legend: {
        orient: 'vertical',
        right: '0%',
        top: 'middle',
        itemGap: 10,
        textStyle: {
          fontSize: 12
        }
      },
      series: [
        {
          name: t('DistributionAnnualRepaymentAmount'),
          type: 'pie',
          radius: ['30%', '60%'],
          center: ['35%', '55%'],  // 左移中心，为右侧标签腾出空间
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'inside',
            formatter: params => {
              const valueWan = (params.value / 10000).toFixed(4);
              return `${params.name}\n¥${valueWan} 万\n(${params.percent}%)`;
            },
            fontSize: 12
          },
          labelLine: {
            show: true,
            length: 20,
            length2: 10
          },
          data: yearAmountData.data
        }
      ]
    });
    window.addEventListener('resize', () => {
      yearPieInstance.resize()
    })
    handleTrendMetric(trendMetric.value)
  }).finally(() => {
    loadingTrendAnalysis.value = false
  })
}

const updateOverviewCards = (index) => {
  const chartInstance = echarts.init(charts.value[index]);
  if (overviewCards.value[index].change === true) {
    if (index === 1) {
      chartInstance.setOption({
        grid: {
          top: 0,
          bottom: 0,
          left: 10,
          right: 80, // 预留右侧空间放图例
          containLabel: false
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: opportunityData.value.map(t => t.name)
        },
        series: [
          {
            type: 'bar',
            data: opportunityData.value.map(t => t.value),
            barWidth: 6,
            itemStyle: {
              color: params => {
                const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666']
                return colors[params.dataIndex % colors.length]
              },
              borderRadius: [0, 3, 3, 0]
            },
            label: {
              show: true,
              position: 'right',
              distance: 5,
              fontSize: 10,
              color: '#333'
            }
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: p => `${p.name}: ${p.value} 个`
        },
        graphic: opportunityData.value.map((t, i) => ({
          type: 'group',
          left: '90%',        // 调整图例整体靠右
          top: 0 + i * 12,    // 整体上移
          children: [
            {
              type: 'rect',
              shape: {width: 8, height: 8},
              style: {
                fill: ['#5470C6', '#91CC75', '#FAC858', '#EE6666'][i]
              }
            },
            {
              type: 'text',
              left: 10,
              top: 0,
              style: {
                text: t.name,
                fontSize: 10,
                fill: '#333'
              }
            }
          ]
        }))
      }, true);
    }
  } else {
    chartInstance.setOption({
      animation: false,
      grid: {top: 0, right: 0, bottom: 0, left: 0},
      xAxis: {show: false, type: 'category'},
      yAxis: {show: false},
      series: [{
        type: 'line',
        data: overviewCards.value[index].data.map(d => d.value),
        smooth: true,
        symbol: 'none',
        lineStyle: {color: '#1890FF'},
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(24,144,255,0.3)'},
            {offset: 1, color: 'rgba(24,144,255,0)'}
          ])
        }
      }]
    }, true);
  }
  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
}

const handleOverviewCard = (index) => {
  overviewCards.value[index].change = !overviewCards.value[index].change
  updateOverviewCards(index)
}

onMounted(() => {
  updateData()
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.overview-card {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.title {
  color: #606266;
  font-size: 14px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
}

.trend-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 12px;
}

.trend-info.up {
  color: #67c23a;
}

.trend-info.down {
  color: #f56c6c;
}

.trend-info .el-icon {
  margin-right: 4px;
}

.chart-container {
  height: 48px;
}

.chart {
  width: 100%;
  height: 100%;
}

.analysis-section {
  margin-bottom: 24px;
}

.chart-card {
  height: 100%;
}

.funnel-chart,
.pie-chart {
  height: 320px;
}

.trend-card {
  margin-bottom: 24px;
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trend-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trend-chart {
  height: 320px;
}

.year-chart {
  height: 320px;
}

.map-chart {
  height: 600px;
}
</style>
